<template>
    <div class="login mBg  py-[20px] px-[12px]">
        <div class="loginBox py-[15px]  overflow-auto">
            <div class=" text-center mt-[20px] mb-[50px]">
                <p class="color1 text-[20px] font-bold">常德市心理咨询师协会</p>
            </div>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="ruleForm.mobile" name="手机号" label="手机号" placeholder="手机号"
                            :rules="[
                                { required: true, message: '请填写手机号' },
                                {
                                    pattern: /^1[3456789]\d{9}$/,
                                    message: '手机号码格式错误！',
                                    trigger: 'onBlur',
                                },
                            ]" />

                    <van-field v-model="ruleForm.password" type="password" name="密码" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />

                        <van-field v-model="ruleForm.repeat_password" type="password" name="确认密码" label="确认密码" placeholder="确认密码"
                        :rules="[{ required: true, message: '请填写确认密码' }]" />
                </van-cell-group>

                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        注册
                    </van-button>
                </div>
            </van-form>
            <div class="mt-[30px] flex pl-[20px]">
                <p class="color1 text-[15px]" @click="goRegister">已有账号, 去登录</p>
            </div>
            <div class="color1 mt-[50px] bottom-[50px] w-[100%] font-bold text-[14px] text-center">
                为了预约成功有效，请放心注册或登录。
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { showSuccessToast, showFailToast } from 'vant';
import {useAutoRequest} from "@/hooks/loading"
import api from "@/api/api"
const [loading , Register] =  useAutoRequest(api.Register)
const router = useRouter()
const ruleForm = ref({
    mobile: '',
    password: '',
    repeat_password: '',
})
const onSubmit = async() => {
    await Register({
        ...ruleForm.value
    })
    showSuccessToast('注册成功!')
    setTimeout(()=> {
        router.replace({
        path: '/login'
    })
    },1000)
}

const goRegister = () => {
    router.replace({
        path: '/login'
    })
}
</script>

<style scoped lang="scss">
.login {
    .loginBox {
        background: #FFFFFF;
        height: 100%;
        border-radius: 14px 14px 14px 14px;
    }
}
</style>